<template>
  <div class="content">
  <el-tabs type="card">
    <el-form label-width="" v-model="demo">
          <el-row id="compay"></el-row>
        <el-table :data="curriculumListData" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="负责人" prop="displayName">
          </el-table-column>
          <el-table-column align="center" label="手机号" prop="cellphone">
          </el-table-column>
          <el-table-column align="center" label="身份证" prop="identityCard">
          </el-table-column>
          <el-table-column align="center" label="授权方案" prop="schemes">
          </el-table-column>
          <el-table-column align="center" label="激活码数量" prop="activationMax">
          </el-table-column>
          <el-table-column align="center" label="授权区域" prop="province.label">
          </el-table-column>
          <el-table-column align="center" label="服务时间" prop="monthCount">
          </el-table-column>
          <el-table-column align="center" label="创建时间" prop="createdTime">
          </el-table-column>
          <el-table-column align="center" label="后台账号" prop="username">
          </el-table-column>
        </el-table>
        <el-row id="company" style="text-align: center;line-height: 48px;"></el-row>
        <el-table :data="curriculumListShow" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="负责人" prop="displayName">
          </el-table-column>
          <el-table-column align="center" label="手机号" prop="cellphone">
          </el-table-column>
          <el-table-column align="center" label="身份证" prop="identityCard">
          </el-table-column>
          <el-table-column align="center" label="授权方案" prop="schemesName">
          </el-table-column>
          <el-table-column align="center" label="激活码数量" prop="activationStudentAdd">
          </el-table-column>
          <el-table-column align="center" label="授权区域" prop="province.label">
          </el-table-column>
          <el-table-column align="center" label="服务时间" prop="monthCount">
          </el-table-column>
          <el-table-column align="center" label="创建时间" prop="createdTime">
          </el-table-column>
        </el-table>
        <div class="table-list">
          <div class="table-list-text">
            <p>激活码</p>
          </div>
          <div class="table-list-content">
            <el-table :data="courseData" border fit highlight-current-row style="width: 100%">
              <el-table-column align="center" label="激活码" prop="code">
              </el-table-column>
              <el-table-column align="center" label="设备id" prop="deviceNo">
              </el-table-column>
              <el-table-column align="center" label="结束时间" prop="createdTime">
              </el-table-column>
              <el-table-column
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small"
                   @click="unbingingFun(scope.row)" v-if="scope.row.status.label ==='启用'">解绑
                </el-button>
                <el-button type="text" size="small"
                   @click="unbingingFun(scope.row)" v-if="scope.row.status.label ==='未激活'">
                </el-button>
                <el-button type="text" size="small"
                   @click="unbingingFun(scope.row)" v-if="scope.row.status.label ==='解绑状态'">
                </el-button>
                <el-button type="text" size="small"
                   @click="unbingingFun(scope.row)" v-if="scope.row.status.label ==='终止'">解绑
                </el-button>
                <el-button type="text" size="small"
                   @click="unbingingFun(scope.row)" v-if="scope.row.status.label ==='结束'">
                </el-button>
                <el-button type="text" size="small" 
                    @click="activationDeleteFun(scope.row)" v-if="scope.row.status.label ==='启用'"> 
                </el-button>
                <el-button type="text" size="small" 
                    @click="activationDeleteFun(scope.row)" v-if="scope.row.status.label ==='解绑状态'"> 删除
                </el-button>
                <el-button type="text" size="small" 
                    @click="activationDeleteFun(scope.row)" v-if="scope.row.status.label ==='未激活'"> 删除
                </el-button>
                <el-button type="text" size="small" 
                    @click="activationDeleteFun(scope.row)" v-if="scope.row.status.label ==='终止'">
                </el-button>
                <el-button type="text" size="small" 
                    @click="activationDeleteFun(scope.row)" v-if="scope.row.status.label ==='结束'"> 删除
                </el-button>
              </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-form>
    </el-tabs>
    <el-dialog
      title="激活码删除"
      :visible.sync="activationDialog"
      width="30%"
      :before-close="handleClose">
      <span>确定要删除激活码？</span>
      <input type="hidden" name="" v-model="demo.oid" value="">
      <span slot="footer" class="dialog-footer">
        <el-button @click="activationDialog = false">取 消</el-button>
        <el-button type="primary" @click="activationDialogHide()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
  title="解绑"
  :visible.sync="unbingingDialog"
  width="30%"
  :before-close="handleClose">
  <span>确定要解绑？</span>
  <input type="hidden" name="" v-model="demo.deviceNoDialog" value="">
  <span slot="footer" class="dialog-footer">
    <el-button @click="unbingingDialog = false">取 消</el-button>
    <el-button type="primary" @click="unbingingHide()">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
// import tabPane from '@/components/tabPane'
import axios from "axios";
import api from "@/api/agent";
export default {
  data() {
    return {
      list: [
        {
          mm: {
            nn: "mmmmm",
            kk: "3423",
            dd: "2323"
          },
          ii: "888"
        }
      ],
      curriculumListData: [],
      curriculumListShow: [],
      unbingingDialog: false,
      activationDialog: false,
      materialData: [],
      demo: {
        name: "",
        deviceNoDialog: ""
      },
      serverList: [],
      appsData: [],
      courseData: []
    };
  },
  mounted() {
    this.curriculumList();
  },
  methods: {
    handleClose(done) {
      // this.$confirm('确认关闭？')
      //   .then(_ => {

      //   })
      //   .catch(_ => {});
      done();
    },
    timeFormat(time) {
      var d = new Date(time);
      var times =
        d.getFullYear() +
        "-" +
        (d.getMonth() + 1) +
        "-" +
        d.getDate() +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
      return times;
    },
    activationDialogHide() {
      api.activationDelete(this.demo.oid).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "删除成功！",
          type: "success"
        });
        this.activationDialog = false;
        this.curriculumList();
      });
    },
    activationDeleteFun(tab) {
      this.demo.oid = tab.oid;
      this.activationDialog = true;
    },
    unbingingHide() {
      api.unbinging(this.demo.deviceNoDialog).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "解绑成功！",
          type: "success"
        });
        this.unbingingDialog = false;
        this.curriculumList();
      });
    },
    unbingingFun(tab) {
      this.demo.deviceNoDialog = tab.deviceNo;
      this.unbingingDialog = true;
    },
    curriculumList() {
      if (document.getElementsByClassName("has-gutter")[2]) {
        document.getElementsByClassName("has-gutter")[2].style.display = "none";
      }
      api.AgentManagementLook(this.$route.query.oid).then(response => {
        let schemesData = [];
        if (response.schemes) {
          response.schemes.map((item2, m) => {
            schemesData.push(item2.name);
          });
          response["schemes"] = JSON.stringify(schemesData)
            .slice(1, JSON.stringify(schemesData).length - 1)
            .replace(/"/g, "");
        }
        response.serviceModels.map((item, index) => {
          response.serviceModels[index]["activationStudentAdd"] =
            response.serviceModels[index].activationStudentMax +
            response.serviceModels[index].activationTeacherMax;
        });
        this.curriculumListData.push(response);
        // response.serviceModels[0]['activationStudentAdd'] = response.serviceModels[0].activationStudentMax +  response.serviceModels[0].activationTeacherMax
        let serviceModelsSchemes = [];
        if (response.serviceModels.length == "0") {
          document.getElementsByClassName("has-gutter")[1].style.display =
            "none";
          document.getElementsByClassName(
            "el-table__body-wrapper"
          )[1].style.display =
            "none";
          document.getElementsByClassName("table-list")[0].style.display =
            "none";
        }
        if (response.serviceModels[0].schemes) {
          response.serviceModels[0].schemes.map((item, index) => {
            serviceModelsSchemes.push(item.name);
          });
          response.serviceModels[0]["schemes"] = JSON.stringify(
            serviceModelsSchemes
          )
            .slice(1, JSON.stringify(serviceModelsSchemes).length - 1)
            .replace(/"/g, "");
        }

        this.curriculumListShow = response.serviceModels;
        this.curriculumListShow.map((item, index) => {
          this.curriculumListShow[index].createdTime = this.timeFormat(
            item.createdTime
          );
        });
        // this.curriculumListShow.createdTime = timeFormat(this.curriculumListShow.createdTime)
        console.log(response.serviceModels[0].activeCodes);
        document.getElementById("company").innerHTML =
          response.serviceModels[0].company;
        this.courseData = response.serviceModels[0].activeCodes;
        this.courseData.map((item, index) => {
          this.courseData[index].createdTime = item.expiredTime
            ? this.timeFormat(item.expiredTime)
            : "";
        });
      });
    }
  }
};
</script>

<style scoped>
.tab-container {
  margin: 30px;
}
.content {
  margin-left: 30px;
  margin-top: 30px;
}
.table-list {
  width: 100%;
  border: 1px solid #ebeef5;
  overflow: hidden;
}
.table-list-text p {
  height: 100px;
  line-height: 100px;
}
.table-list .table-list-text {
  float: left;
  width: 25%;
  line-height: 20px;
  text-align: center;
  border-right: 1px solid #ebeef5;
}
.table-list .table-list-content {
  width: 75%;
  float: left;
  line-height: 38px;
  text-align: center;
}
</style>
